<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>转盘活动</title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
	<script src="statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script src="statics/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<!-- jquery 旋转插件 -->
	<script src="statics/js/jquery.rotate.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<!-- 大转盘 -->
	<div class="lottery">
		<div class="zhuanpan">
			<div class="turn">
				<img src="statics/images/zhuanpan.png" alt="">
			</div>
			<div class="control choujiang">
				<img src="statics/images/control.png" alt="">
			</div>
		</div>
		<!-- 立即抽奖 -->
		<div class="btn">
			<button class="choujiang">立即抽奖</button>
		</div>
	</div>
	<!-- 获奖名单 -->
	<div class="container">
		<div class="card hjmd">
			<div class="title"><i></i><span>获奖名单</span><i></i></div>
			<div class="table">
				<table>
					<tr>
						<th>昵称</th>
						<th>奖品</th>
						<th>时间</th>
					</tr>
					<tr>
						<td>Sky0</td>
						<td>10元现金券</td>
						<td>2021.06.21</td>
					</tr>
					<tr>
						<td>谁啊谁..</td>
						<td>智能音箱</td>
						<td>2021.06.21</td>
					</tr>
					<tr>
						<td>啊你说..</td>
						<td>100元现金券</td>
						<td>2021.06.21</td>
					</tr>
					<tr>
						<td>He oo</td>
						<td>17VIP会员</td>
						<td>2021.06.21</td>
					</tr>
					<tr>
						<td>〒_〒</td>
						<td>智能电视</td>
						<td>2021.06.21</td>
					</tr>
				</table>
			</div>
		</div>
		<!-- 礼物免费领 -->
		<div class="card lwmfl">
			<div class="title"><i></i><span>礼物免费领</span><i></i></div>
			<div class="subtitle">本次活动最高奖项，1万元红包 奖品如下</div>
			<div class="hongbao t">
				<div class="item">
					<div class="img">
						<img src="statics/images/hongbao.png" alt="">
						<span>1万元</span>
					</div>
					<p>一等奖</p>
					<p>1万元现金红包</p>
				</div>
			</div>
			<div class="hongbao b">
				<div class="item">
					<div class="img">
						<img src="statics/images/hongbao.png" alt="">
						<span>5000</span>
					</div>
					<p>二等奖</p>
					<p>5千元现金红包</p>
				</div>
				<div class="item">
					<div class="img">
						<img src="statics/images/hongbao.png" alt="">
						<span>2000</span>
					</div>
					<p>三等奖</p>
					<p>2千元现金红包</p>
				</div>
			</div>
		</div>
		<!-- 领取任务 -->
		<div class="card lqrw">
			<div class="title"><i></i><span>领取任务</span><i></i></div>
			<div class="list">
				<ul>
					<li>
						<span>分享好友获得抽奖1次</span>
						<button>立即分享</button>
					</li>
					<li>
						<span>参与投资理财获取奖励</span>
						<button>做任务</button>
					</li>
					<li>
						<span>连续签到6天获得抽奖奖励</span>
						<button>立即签到</button>
					</li>
				</ul>
			</div>
		</div>
		<!-- 活动规则 -->
		<div class="card hdgz">
			<div class="title"><i></i><span>活动规则</span><i></i></div>
			<div class="list">
				<ul>
					<li>
						<span>本活动 “17素材” 的用户均可参加</span>
					</li>
					<li>
						<span>活动期间邀请好友参加均可获得相应的活动奖励。</span>
					</li>
					<li>
						<span>本活动最终解释权归本平台所有。</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>

</html>

<script>
	// 抽奖
	var bRotate = false;// 防止重复点击
	$(".choujiang").click(function () {
		if (bRotate) return false;
		var item = Math.floor(Math.floor(Math.random() * 10 + 1))//生成0~10的随机数
		console.log(item);
		// 逆时针每个60度
		switch (item) {
			case 0:
				rotateFn(0, '谢谢参与');
				break;
			case 1:
				rotateFn(60, '一等奖888元');
				break;
			case 2:
				rotateFn(120, '谢谢参与');
				break;
			case 3:
				rotateFn(180, '三等奖88元');
				break;
			case 4:
				rotateFn(240, '三等奖88元');
				break;
			case 5:
				rotateFn(300, '二等奖188元');
				break;
			case 6: //增加"未中奖"概率
				rotateFn(0, '谢谢参与');
				break;
			case 7:
				rotateFn(360, '谢谢参与');
				break;
			case 8:
				rotateFn(0, '谢谢参与');
				break;
			case 9:
				rotateFn(360, '谢谢参与');
				break;
			case 10:
				rotateFn(0, '谢谢参与');
				break;
		}
	})
	function rotateFn(angles, txt) {  //控制轮盘在angle度停下
		bRotate = !bRotate;
		$('.turn').stopRotate();
		$(".turn").rotate({
			angle: 360, //旋转的角度
			animateTo: angles + 1800,//从当前角度旋转多少度
			duration: 3000, //持续时间
			callback: function () { //回调函数
				alert(txt);
				// 模拟添加抽奖记录
				var html = 	'<tr>'+
								'<td>测试</td>'+
								'<td>'+txt+'</td>'+
								'<td>2021.06.21</td>'+
							'</tr>';
				$('.hjmd table ').append(html)
				bRotate = !bRotate;
			}
		})
	}
</script>